

<template>
  <div class="global-video-panel-poi" ref="myPoiRef">
    <div class="panel-body">
      <div class="header">
        <div class="title">123</div>
        <img :src="getImage('global/close.png')" @click="clearPoi" alt="" />
      </div>

      <div class="content-div">content</div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, getCurrentInstance, onBeforeUnmount } from 'vue';

import { addOverlay, removePopup } from '@/components/map/map'
import { getImage } from '@/utils/global'



const { appContext } = getCurrentInstance()
let global = appContext.config.globalProperties

const myPoiRef = ref(null)

let poiLayer = ref(null)


onMounted(() => {
  addPoi()
})


const addPoi = () => {
  if (myPoiRef.value) {
    poiLayer = addOverlay(global.$viewer, myPoiRef.value, Cesium.Cartesian3.fromDegrees(113.1402, 27.7928, 5), 0, 0)

  }
}

const clearPoi = () => {
  if (poiLayer) {
    removePopup(poiLayer)
  }
}

onBeforeUnmount(() => {
  clearPoi()
})

</script>